<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table Exporter 测试页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            line-height: 1.6;
        }
        
        h1, h2 {
            color: #333;
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        th, td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: left;
        }
        
        th {
            background-color: #f8f9fa;
            font-weight: bold;
            color: #333;
        }
        
        tr:nth-child(even) {
            background-color: #f8f9fa;
        }
        
        tr:hover {
            background-color: #e9ecef;
        }
        
        .table-container {
            margin: 30px 0;
        }
        
        .demo-section {
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            padding: 20px;
            margin: 20px 0;
            background: white;
        }
        
        .instructions {
            background: #e3f2fd;
            border-radius: 8px;
            padding: 20px;
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <h1>Table Exporter 测试页面</h1>
    
    <div class="instructions">
        <h2>📋 使用说明</h2>
        <p>这个页面包含多个不同类型的表格，用于测试Table Exporter扩展的功能。</p>
        <ol>
            <li>安装Table Exporter扩展</li>
            <li>点击浏览器工具栏中的扩展图标</li>
            <li>选择要导出的表格或全部表格</li>
            <li>选择CSV或Excel格式进行导出</li>
        </ol>
    </div>

    <div class="demo-section">
        <h2>员工信息表</h2>
        <table>
            <caption>公司员工基本信息统计表</caption>
            <thead>
                <tr>
                    <th>员工ID</th>
                    <th>姓名</th>
                    <th>部门</th>
                    <th>职位</th>
                    <th>入职日期</th>
                    <th>薪资</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>E001</td>
                    <td>张三</td>
                    <td>技术部</td>
                    <td>高级工程师</td>
                    <td>2020-03-15</td>
                    <td>15,000</td>
                </tr>
                <tr>
                    <td>E002</td>
                    <td>李四</td>
                    <td>产品部</td>
                    <td>产品经理</td>
                    <td>2019-08-20</td>
                    <td>18,000</td>
                </tr>
                <tr>
                    <td>E003</td>
                    <td>王五</td>
                    <td>设计部</td>
                    <td>UI设计师</td>
                    <td>2021-01-10</td>
                    <td>12,000</td>
                </tr>
                <tr>
                    <td>E004</td>
                    <td>赵六</td>
                    <td>技术部</td>
                    <td>前端工程师</td>
                    <td>2021-06-01</td>
                    <td>13,000</td>
                </tr>
                <tr>
                    <td>E005</td>
                    <td>钱七</td>
                    <td>运营部</td>
                    <td>运营专员</td>
                    <td>2022-02-14</td>
                    <td>9,000</td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="demo-section">
        <h2>销售数据统计</h2>
        <table>
            <thead>
                <tr>
                    <th rowspan="2">月份</th>
                    <th colspan="3">销售额 (万元)</th>
                    <th rowspan="2">增长率</th>
                </tr>
                <tr>
                    <th>线上</th>
                    <th>线下</th>
                    <th>总计</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1月</td>
                    <td>120.5</td>
                    <td>89.3</td>
                    <td>209.8</td>
                    <td>+8.5%</td>
                </tr>
                <tr>
                    <td>2月</td>
                    <td>135.2</td>
                    <td>92.7</td>
                    <td>227.9</td>
                    <td>+12.3%</td>
                </tr>
                <tr>
                    <td>3月</td>
                    <td>149.8</td>
                    <td>106.4</td>
                    <td>256.2</td>
                    <td>+15.7%</td>
                </tr>
                <tr>
                    <td>4月</td>
                    <td>142.6</td>
                    <td>98.9</td>
                    <td>241.5</td>
                    <td>+11.2%</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td><strong>总计</strong></td>
                    <td><strong>548.1</strong></td>
                    <td><strong>387.3</strong></td>
                    <td><strong>935.4</strong></td>
                    <td><strong>+11.9%</strong></td>
                </tr>
            </tfoot>
        </table>
    </div>

    <div class="demo-section">
        <h2>简单数据表</h2>
        <table>
            <tr>
                <th>项目</th>
                <th>完成状态</th>
                <th>负责人</th>
                <th>截止日期</th>
            </tr>
            <tr>
                <td>网站重构</td>
                <td>进行中</td>
                <td>张三</td>
                <td>2024-12-31</td>
            </tr>
            <tr>
                <td>移动应用开发</td>
                <td>已完成</td>
                <td>李四</td>
                <td>2024-11-15</td>
            </tr>
            <tr>
                <td>数据分析报告</td>
                <td>待开始</td>
                <td>王五</td>
                <td>2025-01-20</td>
            </tr>
        </table>
    </div>

    <div class="demo-section">
        <h2>包含特殊字符的表格</h2>
        <table>
            <thead>
                <tr>
                    <th>产品名称</th>
                    <th>描述</th>
                    <th>价格</th>
                    <th>备注</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>"智能手机"</td>
                    <td>高端机型，支持5G网络</td>
                    <td>¥3,999</td>
                    <td>包含引号,逗号</td>
                </tr>
                <tr>
                    <td>笔记本电脑</td>
                    <td>轻薄本，续航12小时
                    支持多任务处理</td>
                    <td>¥8,888</td>
                    <td>包含换行符</td>
                </tr>
                <tr>
                    <td>无线耳机</td>
                    <td>降噪功能，蓝牙5.0</td>
                    <td>¥599</td>
                    <td>热销产品 🎧</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>
        // 动态生成一个表格来测试动态内容
        document.addEventListener('DOMContentLoaded', function() {
            const dynamicSection = document.createElement('div');
            dynamicSection.className = 'demo-section';
            dynamicSection.innerHTML = `
                <h2>动态生成表格</h2>
                <table id="dynamicTable">
                    <thead>
                        <tr>
                            <th>编号</th>
                            <th>随机数</th>
                            <th>时间戳</th>
                            <th>状态</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            `;
            
            document.body.appendChild(dynamicSection);
            
            // 填充动态数据
            const tbody = document.querySelector('#dynamicTable tbody');
            for (let i = 1; i <= 5; i++) {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td>${i}</td>
                    <td>${Math.floor(Math.random() * 1000)}</td>
                    <td>${new Date().toLocaleString()}</td>
                    <td>${i % 2 === 0 ? '活跃' : '非活跃'}</td>
                `;
                tbody.appendChild(row);
            }
        });
    </script>
</body>
</html>